<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
    <el-radio-group v-model="curStyle">
        <el-radio v-for="item in styleOptions" :key="item" :label="item" @click="toggleMapStyle(item)">
            {{item}}
        </el-radio>
    </el-radio-group>
</template>

<script>
    import {ref} from "vue"
    import Mapbox from "@/components/common/Mapbox.component.vue"
    import {mapStyle} from "@/consts/MapConfigConst"

    export default {
        name: "ChangeMapStyle.component",
        components: {Mapbox},
        setup() {

            let mapStore = ref({});
            let mapOnLoadCB = (map) => {
                mapStore.value = map;
                styleOptions.value = _.keys(mapStyle)
            };

            let curStyle = ref("streets-v11")
            let styleOptions = ref([])
            const toggleMapStyle = (key) => {
                curStyle.value = key
                mapStore.value.setStyle(mapStyle[key])
            }

            return {
                mapOnLoadCB, curStyle, styleOptions, toggleMapStyle
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-radio-group {
        position: absolute;
        left: 20px;
        top: 20px;
        background: rgb(255 255 255 / 80%);
        color: #333;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
</style>